<template>
  <div>
    <el-table
      :data="paginatedAppointmentsData"
      height="70vh"
      style="width: 100%"
      stripe
    >
      <el-table-column prop="id" label="挂单号编号" width="300" />
      <el-table-column prop="doctorName" label="医生姓名" width="250" />
      <el-table-column prop="time" label="时间" width="250" />
      <el-table-column prop="statue" label="状态" width="250" />
      <el-table-column prop="operation" label="操作" width="250">
        <template v-slot="scope">
          <el-button
            v-if="scope.row.ifPay === '0'"
            type="primary"
            size="mini"
            @click="toPay(scope.row)"
          >
            去缴费
          </el-button>
          <el-button
            v-else-if="scope.row.ifPay === '1' && scope.row.ifFinish !== '2'"
            type="primary"
            size="mini"
            disabled
          >
            已缴费
          </el-button>
          <el-button
            v-else-if="scope.row.ifFinish === '2'"
            type="primary"
            size="mini"
            @click="handleCheckRecord(scope.row)"
          >
            查看病历
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="MyAppointmentsData.length"
      />
    </div>
    <el-dialog
      v-model="appointment_dialogVisible"
      class="custom-dialog appointment-dialog"
      width="60vw"
      style="margin-left: 20vw"
      :before-close="handleClose"
    >
      <template #title>
        <span style="margin-left: 2vw">请支付</span>
      </template>
      <div class="user-appointment-payment-detail">
        <div class="user-appointment-payment-items recure-time">
          就诊时间:
          <span>{{ appointment.time }}</span>
        </div>
        <div class="user-appointment-payment-items">
          医院名称:
          <span>重庆大学附属医院</span>
        </div>
        <div class="user-appointment-payment-items">
          就诊科室:
          <span> {{ appointment.department }}</span>
        </div>
        <div class="user-appointment-payment-items">
          医生姓名:
          <span> {{ appointment.doctorName }}</span>
        </div>
        <div class="user-appointment-payment-items">
          支付金额:
          <span> 50</span>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer" style="text-align: center">
          <el-button type="primary" @click="appointmentSurePay()"
            >确认支付</el-button
          >
          <el-button @click="appointmentNoPay()"> 取消支付 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
export default {
  name: "UserMyAppointments",
  id: "",
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      appointment_dialogVisible: false,
      appointment: {},
      MyAppointmentsData: [
        {
          id: "1",
          doctorName: "张三",
          time: "2021-09-01 09:00",
          statue: "未缴费",
          operation: "0",
        },
        {
          id: "2",
          doctorName: "李四",
          time: "2021-09-01 10:00",
          statue: "已缴费",
          operation: "1",
        },
        {
          id: "3",
          doctorName: "王五",
          time: "2021-09-01 11:00",
          statue: "前方还有x人",
          operation: "2",
        },
      ],
    };
  },
  computed: {
    paginatedAppointmentsData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.MyAppointmentsData.slice(start, end);
    },
  },
  methods: {
    handleCheckRecord(row) {
      console.log(row);
      this.$router.push({ name: "UserCheckRecord", params: { id: row.id } });
    },
    toPay(row) {
      console.log("row", row);
      this.appointment.time = row.time;
      this.appointment.doctorName = row.doctorName;
      this.appointment.department = row.department;
      this.appointment_dialogVisible = true;
      this.appointment.arrangeId = row.id;
      // this.$router.push({ name: "UserPayment" });
    },
    appointmentSurePay() {
      console.log(this.appointment.arrangeId);
      axios.get("http://192.168.228.82:8080/arrange/updateIfPay", {
        params: {
          arrangeId: this.appointment.arrangeId,
        },
      });
      this.appointment_dialogVisible = false;
      window.location.reload();
      ElMessage({
        message: "支付成功！！！",
        type: "success",
        plain: true,
        offset: 250,
        duration: 1000,
      });
    },
    appointmentNoPay() {
      this.appointment_dialogVisible = false;
      ElMessage({
        message: "支付失败",
        type: "warning",
        plain: true,
        offset: 250,
        duration: 1000,
      });
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      localStorage.setItem("currentPage", page);
    },
  },
  mounted() {
    this.id = JSON.parse(localStorage.getItem("user")).pid;
    this.currentPage = parseInt(localStorage.getItem("currentPage")) || 1;
    axios
      .get("http://192.168.228.82:8080/arrange/findArrangeByPId2", {
        params: {
          pId: this.id,
        },
      })
      .then((res) => {
        console.log(res.data.arrangeList);
        this.MyAppointmentsData = res.data.arrangeList
          .map((item) => {
            console.log(
              item.arrangeId,
              item.doctor.name,
              item.arrangeTime,
              item.ifPay,
              item.ifFinish,
              item.peopleAhead
            );
            return {
              id: item.arrangeId,
              doctorName: item.doctor.name,
              time: dayjs(item.arrangeTime).subtract(8,"hour").format("YYYY-MM-DD HH:mm:ss"),
              ifPay: item.ifPay,
              ifFinish: item.ifFinish,
              department: item.doctor.department,
              statue:
                item.ifPay === "0"
                  ? "未缴费"
                  : item.ifFinish === "2"
                  ? "已完成"
                  : `前方还有${item.peopleAhead}人`,
            };
          })
          .sort((a, b) => new Date(a.time) - new Date(b.time));
      });
  },
};
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin-top: 20px; /* 添加一些上边距 */
}
.user-appointment-payment-detail {
  padding: 20px;
  font-size: 16px;
}
.user-appointment-payment-items {
  height: 10px;
  margin-top: 10px;
  padding: 15px; /* 内边距 */
}
</style>
